<template>
  <div class="box box-info">
    <div class="box-header with-border" style="background-color: #f5f9fe;">
      <h3 class="box-title">{{currentBridge.name}}历史检查情况</h3>
      <div class="box-tools pull-right">
        <el-button size="small" type="primary" @click="handleBack"><i class="fa fa-chevron-left"></i>&nbsp;&nbsp;返回</el-button>
      </div>
    </div>

    <div class="box-body" style="background-color: #f0f4f9;">
      <!-- 检查历史时间线 -->
      <ul class="timeline" v-if="inspectionResultList.length > 0">

        <template v-for="item of inspectionResultList">

          <!-- 检查历史详细信息标题 -->
          <li class="time-label">
            <span :class="{
              'bg-aqua':item.bridgeLevel === 1,
              'bg-blue':item.bridgeLevel === 2,
              'bg-yellow':item.bridgeLevel === 3,
              'bg-orange':item.bridgeLevel === 4,
              'bg-red':item.bridgeLevel === 5,
              }">{{item.inspectionDate + '  全桥评定等级：' + (!!item.bridgeLevel?item.bridgeLevel+'类':'未评级')}}</span>
          </li>

          <!-- 桥梁的三张照片 -->
          <li>
            <i class="fa fa-camera bg-aqua"></i>
            <div class="timeline-item">

              <h3 class="timeline-header">桥梁正面照、侧面照及仰视照</h3>

              <div class="timeline-body">
                <img :src="getImgUrl(item.frontPath)" width="150" height="100" alt="正面照缺失" class="margin">
                <img :src="getImgUrl(item.sidePath)" width="150" height="100"  alt="侧面照缺失" class="margin">
                <img :src="getImgUrl(item.upwardPath)" width="150" height="100"  alt="仰视照缺失" class="margin">
              </div>
            </div>
          </li>

          <!--桥梁详细的检查评定结果-->
          <li>
            <i class="fa fa-pencil-square-o bg-purple"></i>

            <div class="timeline-item">
              <h3 class="timeline-header">桥梁检查评定结果</h3>
              <div class="timeline-body">
                <template v-for="e of item.bridgeEvaluationList">
                  <p class="evaluation-side-desc"><b>{{e.sideTypeName+'('+e.superstructureTypeName+')'+'：'+(e.evaluationType === 0?'综合评分：'+e.sidePoint+' / ':'调整评分：')+e.sideLevel+'类'}}</b></p>
                  <p class="evaluation-desc">上部：{{pointToLevel(e.superPoint)}}，主要病害：{{e.superMainDisease}}</p>
                  <p class="evaluation-desc">下部：{{pointToLevel(e.subPoint)}}，主要病害：{{e.subMainDisease}}</p>
                  <p class="evaluation-desc">桥面：{{pointToLevel(e.deckPoint)}}，主要病害：{{e.deckMainDisease}}</p>
                </template>
              </div>
              <div class="timeline-footer">
                <el-dropdown @command="showDiseaseTable" trigger="click" style="margin-right: 8px">
                  <!--病害详表-->
                  <el-button size="mini" type="primary">
                    查看病害详表&nbsp;&nbsp;<Icon type="arrow-down-b"></Icon>
                  </el-button>
                  <el-dropdown-menu v-if="item.bridgeEvaluationList.length > 0" slot="dropdown">
                    <el-dropdown-item v-for="e of item.bridgeEvaluationList" :key="e.id" :command="e">{{e.sideTypeName+'('+e.superstructureTypeName+')'}}</el-dropdown-item>
                  </el-dropdown-menu>
                  <el-dropdown-menu v-else slot="dropdown">
                    <el-dropdown-item>无分幅信息</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <!--评定详表-->
                <el-dropdown @command="showEvaluationTable" trigger="click" style="margin-right: 8px">
                  <el-button size="mini" type="danger">
                    查看评定详表&nbsp;&nbsp;<Icon type="arrow-down-b"></Icon>
                  </el-button>
                  <el-dropdown-menu v-if="item.bridgeEvaluationList.length > 0" slot="dropdown">
                    <el-dropdown-item v-for="e of item.bridgeEvaluationList" :key="e.id" :command="e">{{e.sideTypeName+'('+e.superstructureTypeName+')'}}</el-dropdown-item>
                  </el-dropdown-menu>
                  <el-dropdown-menu v-else slot="dropdown">
                    <el-dropdown-item>无相关信息</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </li>
        </template>

        <!-- END timeline item -->
        <li>
          <i class="fa fa-clock-o bg-gray"></i>
        </li>
      </ul>

      <!--列表为空的情况-->
      <div v-else>无此桥相关检查评定信息</div>

      <!--病害信息详表-->
      <el-dialog :title="currentBridgeEvaluation.sideTypeName+'('+currentBridgeEvaluation.superstructureTypeName+')'" size="large" v-model="isDiseaseTableVisible">
        <FrontSideTable
          ref="diseaseTable"
          dataUrl="/maintain/bridgeHistory/getBridgeDiseaseList"
          :dataParam="currentBridgeEvaluation"
          tableTitle="病害列表"
          :columns="diseaseColumns"
          :searchProps="searchProps"
          :showLoadingProgress="false"
          customButton>
          <!--照片展开-->
          <template slot="beforeColumns">
            <el-table-column type="expand">
              <template slot-scope="scope">
                <DiseasePhotoWall
                  imageUrl="/maintain/getDiseasePhoto"
                  thumbnailUrl="/maintain/getDiseasePhoto"
                  :defaultList = "scope.row.diseasePhotoList"
                  :canOperate="false">
                </DiseasePhotoWall>
              </template>
            </el-table-column>
          </template>
        </FrontSideTable>
      </el-dialog>

      <!--评定信息查看表格-->
      <el-dialog title="桥梁评分详表" size="large" v-model="isEvaluationTableVisible">
        <div v-if="!evaluationDetail || evaluationDetail.length===0" class="el-table__empty-block" style="width: 100%"  v-loading="loadingEvaluationTable" element-loading-text="正在加载评定信息">
          <span class="el-table__empty-text" style="width: 100%;">暂无详细评定信息</span>
        </div>
        <el-tabs v-else>
          <el-tab-pane v-for="structure of evaluationDetail" :key="structure.superstructureTypeName" :label="structure.superstructureTypeName">
            <!--部构件表格区域-->
            <div class="el-table el-table--fit el-table--striped el-table--border el-table--enable-row-hover el-table--enable-row-transition">
              <!--表格标题-->
              <div class="el-table__header-wrapper">
                <table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width:100%; font-size: 1em; line-height: 1.2em;">
                  <thead>
                  <tr>
                    <th class="is-center">部位</th>
                    <th class="is-center">部件</th>
                    <th class="is-center">权重</th>
                    <th class="is-center">重分配权重</th>
                    <th class="is-center">构件类型</th>
                    <th class="is-center">构件数量</th>
                    <th class="is-center">孔跨</th>
                    <th class="is-center">构件</th>
                    <th class="is-center" style="width: 200px;">评定指标</th>
                    <th class="is-center">标度</th>
                    <th class="is-center">扣分值</th>
                    <th class="is-center">构件得分</th>
                    <th class="is-center">部件得分</th>
                    <th class="is-center">部位得分</th>
                    <th class="is-center">总分</th>
                    <th class="is-center">评级</th>
                  </tr>
                  </thead>
                </table>
              </div>
              <!--表格主体-->
              <div class="el-table__body-wrapper">
                <table cellspacing="0" cellpadding="0" border="0" class="el-table__body" style="width:100%; font-size: 1em; line-height: 1.2em;">
                  <tbody>
                  <tr v-for="(item, index, array) in mixEvaluationDto(structure.positionEvaluationList)" :key="index">
                    <td v-if="!!item.positionTypeName" class="is-center" :rowspan="item.positionRowSpan">{{item.positionTypeName}}</td>
                    <td v-if="!!item.partsTypeName" class="is-center" :rowspan="item.partsRowSpan">{{item.partsTypeName}}</td>
                    <td v-if="!!item.originalWeight" class="is-center" :rowspan="item.partsRowSpan">{{item.originalWeight}}</td>
                    <td v-if="!!item.resizeWeight" class="is-center" :rowspan="item.partsRowSpan">{{item.resizeWeight}}</td>
                    <td v-if="!!item.memberTypeName" class="is-center" :rowspan="item.memberTypeRowSpan">{{item.memberTypeName}}</td>
                    <td v-if="!!item.memberCount" class="is-center" :rowspan="item.memberTypeRowSpan">{{item.memberCount}}</td>
                    <td v-if="!!item.siteNo" class="is-center" :rowSpan="item.siteRowSpan">{{item.siteNo}}</td>
                    <td v-if="!!item.bridgeMemberName" class="is-center" :rowspan="item.bridgeMemberRowSpan">{{item.bridgeMemberName}}</td>
                    <td class="is-center" style="width: 200px;">{{item.evaluationIndexName}}</td>
                    <td class="is-center">{{item.deductionScale}}</td>
                    <td class="is-center">{{item.deductionPoint}}</td>
                    <td v-if="!!item.bridgeMemberName" class="is-center" :rowspan="item.bridgeMemberRowSpan">{{item.bridgeMemberPoint}}</td>
                    <td v-if="!!item.partsPoint" class="is-center" :rowspan="item.partsRowSpan">{{item.partsPoint}}</td>
                    <td v-if="!!item.positionPoint" class="is-center" :rowspan="item.positionRowSpan">{{item.positionPoint}}</td>
                    <td v-if="index === 0" class="is-center" :rowspan="structure.rowSpan">{{structure.point}}</td>
                    <td v-if="index === 0" class="is-center" :rowspan="structure.rowSpan">{{structure.level+'类'}}</td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import FrontSideTable from "../template/FrontSideTable.vue";
  import DiseasePhotoWall from "../template/DiseasePhotoWall.vue"
  import {appendRequestParam, doGet} from "../../assets/js/utils/RequestUtils";
  import {CONTEXT_PATH} from "../../assets/js/global";
  import {mixEvaluationDto, pointToLevel} from "../../assets/js/utils/EvaluationUtils";
  import {COMPLETE, LOADING} from "../../store/mutationTypes";

  const IMG_URL = "/maintain/bridgeHistory/getBridgePhoto";

  const INSPECTION_RESULT_URL = "/maintain/bridgeHistory/getBridgeHistoryDetail";

  const EVALUATION_DETAIL_URL = "/maintain/bridgeHistory/getEvaluationDetail";

  export default {
    name:"BridgeHistoryDetail",
    props:{
      currentBridge:{
        type:Object,
        required:true
      }
    },
    data() {
      return {
        inspectionResultList:[],
        isDiseaseTableVisible:false,
        isEvaluationTableVisible:false,
        currentBridgeEvaluation:{},
        diseaseColumns:[
          {prop:"siteNo", label:"孔号", width:"150", sortable:true},
          {prop:"bridgeMemberName", label:"构件", width:"150"},
          {prop:"bridgeDiseaseName", label:"病害描述"},
          {prop:"deductionScale", label:"标度", width:"100", filters:[{text:"标度1", value:1},{text:"标度2", value:2},{text:"标度3", value:3},{text:"标度4", value:4},{text:"标度5", value:5},{text:"重点关注", value:0}]}
        ],
        searchProps:["siteNo", "bridgeMemberName", "bridgeDiseaseName"],
        evaluationDetail:[],
        loadingEvaluationTable:false,
      }
    },
    methods:{
      handleBack() {
        this.$emit("onBack");
      },
      getImgUrl(path) {
        let url = appendRequestParam(CONTEXT_PATH + IMG_URL, "tokenId", localStorage.getItem("tokenId"));
        return appendRequestParam(url, "path", path);
      },
      fetchInspectionResult() {
        this.$store.commit(LOADING);
        doGet(INSPECTION_RESULT_URL, {data:{bridgeId:this.currentBridge.id}, component:this})
          .then(response=>this.inspectionResultList = response)
          .finally(()=>this.$store.commit(COMPLETE));
      },
      showDiseaseTable(evaluation) {
        this.currentBridgeEvaluation = evaluation;
        if(this.$refs["diseaseTable"]) this.$refs["diseaseTable"].fetchData(evaluation);
        this.isDiseaseTableVisible = true;
      },
      showEvaluationTable(evaluation) {
        this.isEvaluationTableVisible = true;
        this.loadingEvaluationTable = true;
        this.evaluationDetail = [];
        doGet(EVALUATION_DETAIL_URL, {data:evaluation})
          .then(response=>this.evaluationDetail = response)
          .finally(()=>this.loadingEvaluationTable = false);
      }, /** 生成评定详表对象 */
      mixEvaluationDto,
      pointToLevel
    },
    mounted() {
      this.fetchInspectionResult();
    },
    components:{FrontSideTable, DiseasePhotoWall}
  }
</script>



// WEBPACK FOOTER //
// BridgeHistoryDetail.vue?ca0b2dfe
